<template>
	<view :id="id" :class="`${selected} ${hovered}`">
	<slot></slot>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: "unitvPage",
		inject: ['pageId','zoneId','zoneState','zoneItems'],
		props: {
			item:{
				type:Number
			},
			hoverClass:{
				type:String,
				default:'item-hover'
			},
			selectClass:{
				type:String,
				default:'item-active'
			}
		},
		created() {
			// console.log(this.zoneId)
			this.zoneItems[this.item]=this;
		},
		mounted() {
			if(this.zoneState.curZone&&this.zoneState.curItem==this.item){
				this.handleHover();
				this.refreshScroll();
			}
		},
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(['currentZone','currentPage']),
			selected:function(){
				if(!this.zoneState.curZone&&this.zoneState.curItem==this.item){
					return this.selectClass;
				}else{
					return "";
				}
			},
			hovered:function(){
				if(this.zoneState.curZone&&this.zoneState.curItem==this.item){
					return this.hoverClass;
				}else{
					return "";
				}
			},
			id:function(){
				return this.zoneId+'_'+this.item;
			}
		},
		methods: {
			clientRect(callback){
				let view = uni.createSelectorQuery().in(this).select("#"+this.id);
				view.boundingClientRect(data => {
				  callback(data);
				}).exec();
			},
			refreshScroll(){
				this.clientRect((clientRect)=>{
					uni.showToast({
					    title: clientRect.top,
						icon:'none',
					    duration: 2000
					});
					this.currentPage.RefreshScrollTop(clientRect);
					if(this.zoneState.curScroll!=null){
						this.zoneState.curScroll.RefreshScrollLeft(clientRect);
					}
				});
			},
			handleHover(){
				this.$emit("hover",this.item);
			},
			handleClick(){
				this.$emit("click",this.item);
			}
		},
		watch: {
			hovered:function(newValue){
				if(newValue!=""){
					this.handleHover();
					this.refreshScroll();
				}
			}
		}
	}
</script>

<style scoped>
</style>
